import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';

@Component({
  templateUrl: './lazy-load.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LazyLoadComponent implements OnInit {
  constructor(private cdr: ChangeDetectorRef) {}
  data = [];

  ngOnInit() {
    setTimeout(() => {
      this.data = ['Panel 001', 'Panel 002', 'Panel 003'];
      this.cdr.markForCheck();
    }, 1000);
  }
}

@Component({
  selector: 'collapse-content-lazy',
  template: `
    <div>
      {{ text }}
    </div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CollapseContentLazyComponent implements OnInit {
  @Input() data: string = '';

  constructor(private cdr: ChangeDetectorRef) {}
  text = 'Loading ...';

  ngOnInit() {
    setTimeout(() => {
      this.text = `This is lazy content "${this.data}"`;
      this.cdr.markForCheck();
    }, 1000);
  }
}
